{% load static %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />

  <link rel="icon" type="image/png" href="{% static 'img/favicon.png' %}" />
 
  <!--  Fonts and icons  -->
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
 
  <!-- CSS Files -->
  <link href="{% static 'css/material-kit.min.css' %}" rel="stylesheet" />
  <link href="{% static 'css/style.css' %}" rel="stylesheet" />

  <title>
    {% block custom_title %}{% endblock custom_title %}
  </title>
</head>
<body>

  <div id="top-nav">
    <div class="pt-2 dark-primary-color"></div>
    <nav class="navbar navbar-expand-lg" role="navigation-demo">
      <div class="container">
        <a class="navbar-brand" href="/">Neural Style Transfer</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="sr-only">Toggle navigation</span>
          <span class="navbar-toggler-icon light-primary-color"></span>
          <span class="navbar-toggler-icon light-primary-color"></span>
          <span class="navbar-toggler-icon light-primary-color"></span>
        </button>
        
        <div class="collapse navbar-collapse">
          <ul class="navbar-nav ml-auto">
            {% block nav_links %}
              {% for key, value in nav_items.items %}
                {% if value.child %}
                    <li class="nav-item dropdown">
                        <a href="{{ value.link }}" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                            {{ value.text }}
                        </a> 

                        <div class="dropdown-menu dropdown-menu-right">
                            {% for key_, value_ in value.child.items %}
                                <a href="{{ value_.link }}" class="dropdown-item">
                                    {{ value_.text }}
                                </a>
                            {% endfor %}
                        </div>
                    </li>
                {% else %}
                    <li class="nav-item">
                        <a href="{{ value.link }}" class="nav-link">
                            {{ value.text }}
                        </a> 
                    </li>
                {% endif %}
              {% endfor %}
            {% endblock nav_links %}
          </ul>
        </div>
        
      </div>
    </nav>
  </div>

  <div class="site-wrapper">
    {% block site_content %}{% endblock site_content %}
  </div>
  <!--   Core JS Files   -->
  <script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
  <script src="{% static 'js/popper.min.js' %}" type="text/javascript"></script>
  <script src="{% static 'js/bootstrap-material-design.min.js' %}" type="text/javascript"></script>

  <!-- Custom JS Files -->
  <script src="{% static 'js/material-kit.min.js' %}" type="text/javascript"></script>
  <script src="{% static 'js/script.js' %}" type="text/javascript"></script>
 
</body>
</html>